<!DOCTYPE html>
<html lang="en">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- font -->
    <link href="static/font/css/open-iconic-bootstrap.css" rel="stylesheet">

    <!-- highlight v9.15.6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/solarized-dark.min.css" integrity="sha256-xUUCW7JMutlIaRYLbH+zoZ6m1uR+41g6mnmR1yaJQkk=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" integrity="sha256-aYTdUrn6Ow1DDgh5JTc3aDGnnju48y/1c8s1dgkYPQ8=" crossorigin="anonymous"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <head>
        <meta charset="UTF-8">
        <title>high light</title>
    </head>
    <body>
        <p style="font-size: 60px; font-weight: bold; text-align: center; padding-bottom: 130px; padding-right: 20px; margin-top: 20px;"><span style="color: rgb(79,200,67);">HighLight JS</span><span style="margin-left: 5px;color: rgb(33, 33, 33); font-size: 18px; font-weight: normal;">v9.15.6</span></p>
        <div class="container " style="align-content: center">
            <div id="changeStyleSelect" style="margin-bottom: 10px">
            </div>
            <span style="color: rgb(33, 33, 33); font-size: 50px;">javascript</span>
            <pre>
                <code class="javascript">
function hello(){
    document.getElementById("hello").innerHTML='Hello Highlight';
}
                </code>
            </pre>
            <span style="color: rgb(33, 33, 33); font-size: 50px;">json</span>
            <pre>
                <code class="json">
{
    name:"highlight",
    version:"v9.15.6",
    desciption:"代码高亮JS库"
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">php</span>
            <pre>
                <code class="php">
class Hello {
  public function show() {
    printf('Hello Highlight');
  }
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">java</span>
            <pre>
                <code class="java">
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello Highlight");
    }
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">python</span>
            <pre>
                <code class="python">
#!/usr/bin/python

print "Hello, Highlight!"
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">scala</span>
            <pre>
                <code class="scala">
object Hello {
    def main(args: Array[String]): Unit = {
        println("Hello, Highlight!")
    }
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">c</span>
            <pre>
                <code class="c">
#include "stdio.h"

int main()
{
    printf("Hello, Highlight!");
    return 0;
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">go</span>
            <pre>
                <code class="go">
package main

import "fmt"

func main() {
    fmt.Println("Hello, Highlight!")
}
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">perl</span>
            <pre>
                <code class="perl">
#!/usr/bin/perl

print "Hello, Highlight!";
                </code>
            </pre>

            <span style="color: rgb(33, 33, 33); font-size: 50px;">vbscript</span>
            <pre>
                <code class="vbscript">
document.write("Hello, Highlight!")
                </code>
            </pre>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> </script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script type="text/javascript">
        var cssList = [
            {name:"a11y-dark",SRI:"sha256-7L/IK7qUTcgTXtfLAxip5Eo+hnp+pSe5htBCh5pYg6o="},
            {name:"a11y-light",SRI:"sha256-tJFLL8gFycTbUxiIYM6yLqldxB2YFdzB4viha8cVRsE="},
            {name:"agate",SRI:"sha256-JSc2NuJj16TmKSWoj/4DLPH7eaU+FUGhhRngigyfdJ4="},
            {name:"an-old-hope",SRI:"sha256-dKXomhZB4LQx7y7rSoqJhjaA/3z6xd8eZsQK7OJpU5Y="},
            {name:"androidstudio",SRI:"sha256-YSbArrnKaJ05w0kASSAYJu/S174kd3l1wbGarhjTd5g="},
            {name:"arduino-light",SRI:"sha256-j8iqnVElgQ6+SNxsXa6odf/pAmGgXCFMoNUZexzo6QM="},
            {name:"arta",SRI:"sha256-4G2VvzzvowJkpXN4h1DinKDktGpWYfuRKFDvBprTTzA="},
            {name:"ascetic",SRI:"sha256-4npeVGuQH4xbPy8LGhBBBa4uEffbDNpRQdFMPS6nrtU="},
            {name:"atelier-cave-dark",SRI:"sha256-6C8OjY2iXsn5mdMjYr4s9dbEP3nx2pOyyQtpfZxNB8I="},
            {name:"atelier-cave-light",SRI:"sha256-eiJMPQTA0sBf/eMKaAtGzFuUGpW+4nrm3veRL43Gq/8="},
            {name:"atelier-dune-dark",SRI:"sha256-DQZlvgUn00xcMiAk/nF/3ddib00eLj5qBV3zAlOnBL4="},
            {name:"atelier-dune-light",SRI:"sha256-USs688fppqMiRFMFN1oEEecByDEMOxcJvrIzTXvBa1g="},
            {name:"atelier-estuary-dark",SRI:"sha256-gEhH2MZPPBSwQ9/GOC6xjxLZdDI58cIomlgQNHZpFhI="},
            {name:"atelier-estuary-light",SRI:"sha256-E6yf9zzdjvfJPqKhfUkrAYbO0g9XNtmC7why+ytwjik="},
            {name:"atelier-forest-dark",SRI:"sha256-9WytReNQc7WAeQrysRweencKsgc0Ss5Yg5i9cxylHNY="},
            {name:"atelier-forest-light",SRI:"sha256-JyfKVOg5Uq8TR6gL8jSGhBKaxR0a0EaYap/v7x9J7EI="},
            {name:"atelier-heath-dark",SRI:"sha256-48Ilq/f9iBiMAXCFjKmhGnbUZJI+GJgwQkpSaPNnId4="},
            {name:"atelier-heath-light",SRI:"sha256-sphCjGVRXBZeBPf99Pjc63yR0O+ucePyZelKZ+6Djio="},
            {name:"atelier-lakeside-dark",SRI:"sha256-5DqCoH715ucD349sMcnnwQy3L8WydY2z/mHofqztA+4="},
            {name:"atelier-lakeside-light",SRI:"sha256-ntypSMIROUT93phRWhh0i76TKwvQfS+7yo/DIICCwJo="},
            {name:"atelier-plateau-dark",SRI:"sha256-2eh80Bg0DXWF7xUmxTEMoWa7eX4eYEu7ODcCEvvm/ig="},
            {name:"atelier-plateau-light",SRI:"sha256-mMUR1DIOVdOcexxt6rsOJgxQ39E6Ue/3t4zHXHqi+5o="},
            {name:"atelier-savanna-dark",SRI:"sha256-El9dfiuvQKTg0io/mvZDcNrGwXchT5I7adSaOHUUC9U="},
            {name:"atelier-savanna-light",SRI:"sha256-FeLSjN1XIzcONc62vlORmKm/TqeEXWerpxIl9ostDK8="},
            {name:"atelier-seaside-dark",SRI:"sha256-O0piWn6KKup1xV9OO+IZhd1V2On/TSo6NdWHVF18v+g="},
            {name:"atelier-seaside-light",SRI:"sha256-XoAKD2cszYt4ihoP+VYotce3P69toWMfT6HC2Mt3AOc="},
            {name:"atelier-sulphurpool-dark",SRI:"sha256-qBCTWs635PRSrMf5kLS/oTpBHgZawJinw/7OI72ybdQ="},
            {name:"atelier-sulphurpool-light",SRI:"sha256-C/s2CQSHMz8deT+MBoYehpvvNiGXCkK40kWcZf9iKCg="},
            {name:"atom-one-dark-reasonable",SRI:"sha256-aSSESB/epnDFJNB/SpybxyBS+JiunkIFwZfp/eElB68="},
            {name:"atom-one-dark",SRI:"sha256-GA29iW/iYj9FcuQQktvW45pRzHvZeFfgeFvA4tGVjpM="},
            {name:"atom-one-light",SRI:"sha256-VCcaD9+X/d4QGYRX7l5aMJ8BWgwfA8d3S7i/HC9rvvw="},
            {name:"brown-paper",SRI:"sha256-ifnb/2QC0EsHa/uKscWg2djcawRw3bvSfZzq/rhayhA="},
            {name:"codepen-embed",SRI:"sha256-cIbGbDXOogDDszOfftlsdYla/+CE0wkIbbTmLrNGfkQ="},
            {name:"color-brewer",SRI:"sha256-cPAfcfTf+tyHaCqPKZviQHuxjimY62YZbXUDhEzOlyU="},
            {name:"darcula",SRI:"sha256-6LPwXdYTX9fW/QBOmpsdnGBFIIumODzzBSo04uuTBdg="},
            {name:"dark",SRI:"sha256-UsPwyxU0Hf042dM7ZDoCSmFXrwsUc7enKB8spvR9phw="},
            {name:"darkula",SRI:"sha256-P2KWHSGJ9GJRarV8YnOiILPEadKfOCdzdoWv11gh5v4="},
            {name:"default",SRI:"sha256-zcunqSn1llgADaIPFyzrQ8USIjX2VpuxHzUwYisOwo8="},
            {name:"docco",SRI:"sha256-zfwdg38tZUAhO39t5ZUt35aSlqBHl+4zm09CcXgTSoc="},
            {name:"dracula",SRI:"sha256-4xzi3YxNlqjrtSTUiSM+LSOfJoteCfbhpUnm1WDHvxk="},
            {name:"far",SRI:"sha256-8dvTBuFlQF0Vx7b/2KBCLpgwR1yRNe007cDh61MzyXo="},
            {name:"foundation",SRI:"sha256-3f49Cs0pIeGEeKsiiijsY9ROanptRmsbz3mSEkfv3no="},
            {name:"github-gist",SRI:"sha256-3bRfCcmMiQbIzvnxDzgFY9bl7dc07xbdX3+Mr4QYTY8="},
            {name:"github",SRI:"sha256-iAmWN8uaUdN6Y9FCf8srQdrx3eVVwouJ5QtEiyuTQ6A="},
            {name:"gml",SRI:"sha256-6ORp6ypEoGfT22zSpj4B+fD4tTqIC5Ic5McJOplI4ks="},
            {name:"googlecode",SRI:"sha256-r9Wcn9Di1szOUv089gjtC/Qir88hUj8Zfb7zZESSh5o="},
            {name:"grayscale",SRI:"sha256-/XBx8oAGR/ErKgLZ4XJgSWau7oh1u1Lm0/q2ec+JR6Y="},
            {name:"gruvbox-dark",SRI:"sha256-7PEGSuTgJaP9+RRYxS7gyPM+U8DP2f/AUN610DNmPRw="},
            {name:"gruvbox-light",SRI:"sha256-9jP09uZ1kKtFSrCZ42e9lZ8A5rH88q8fjDdQIryDKgc="},
            {name:"hopscotch",SRI:"sha256-i+K+0vLJCKbMrkv8q1/zYHP6j/42doUeQmZRybl/pl4="},
            {name:"hybrid",SRI:"sha256-LvLsVdsjo+tE140atiUb67nNd5beBGNSQ7vNHNIvy6I="},
            {name:"idea",SRI:"sha256-rYB1c4yTU5UJB//rod7DtBo1JM6HAme/9Vd+VesFG2U="},
            {name:"ir-black",SRI:"sha256-SGpWX/aU5Pk9miPH+jAoes7W0NjBjnl/k2ncyWVTDWo="},
            {name:"isbl-editor-dark",SRI:"sha256-NeV8yKODacmDS2VJZO8mvQ7li6rPO9ZK4KPBqHuSARY="},
            {name:"isbl-editor-light",SRI:"sha256-0omkQmIywj3y9Azr5MoFNUs0bbDg4Xepow3WUp7P1gY="},
            {name:"kimbie.dark",SRI:"sha256-JsLvhZtMLwR+6l3a7B90XoQ3gZYTTYbQgpx+18300PY="},
            {name:"kimbie.light",SRI:"sha256-UXTNcD9qArsLbjCl/Ry7avrmW4NUtDwcywcndBJIOJ0="},
            {name:"lightfair",SRI:"sha256-mCG7Yux2QcxA4LvfqJEA9P4Lcy1lu8/a8JVi/vYE/AE="},
            {name:"magula",SRI:"sha256-YRpRZIMBze4WpnAF+qsIDSslZfaHFb+GNr5Wm75ZMIk="},
            {name:"mono-blue",SRI:"sha256-yU6KUTi38Ir0YRHl6bqPzZh1TRgeNGPeBpECecxrDz0="},
            {name:"monokai-sublime",SRI:"sha256-kTdkFYZP3TqSvlJAUiZ6/s5L2xu4xsdU9eYMWsKOk74="},
            {name:"monokai",SRI:"sha256-/d3ZZC6Gr1V8JDi9Os6A2CjemarhIv16pw1Q6snL+lM="},
            {name:"nord",SRI:"sha256-jDz6QotrRh9EbNuSpY46DQQZukm67mhTQGduA1WdB4A="},
            {name:"obsidian",SRI:"sha256-RJViTWsgfhUYSpOj3t01xyiNkcfjdG4WvIcJHXblbCk="},
            {name:"ocean",SRI:"sha256-U15b7cerVSqg0pgCMEMfxtF4PAa77IHhnywHaVqOkcg="},
            {name:"paraiso-dark",SRI:"sha256-vZcbi5YIpTM3SUauvpp0WJtT6V32/enXwjwGnYQtA1M="},
            {name:"paraiso-light",SRI:"sha256-HinrduPG1mdcBDopBCGteUneCox91KcfC2y1ZYHSVxw="},
            {name:"pojoaque",SRI:"sha256-buPuT00apXvbW3NgAu/apMRDr7duPRb9AIyR2GGpVMo="},
            {name:"purebasic",SRI:"sha256-qbVGsQFiJTDg/BEBCwj86mB8vO3DteC5V9mVjJdCY0U="},
            {name:"qtcreator_dark",SRI:"sha256-4hYYpaqmhuzOvnvVHaIGc/rMcPgLWdDg94NFGUnpvKU="},
            {name:"qtcreator_light",SRI:"sha256-+cWj0k9qvpsC74WBelaIu4hcPeZlgXGiJPWv3I/QTEg="},
            {name:"railscasts",SRI:"sha256-trNZWyaQyUsleeKm/I1oOVlTTdUsuy7TIFQLgBtlhVU="},
            {name:"rainbow",SRI:"sha256-pkyjoAgF+MR0ASX6B+pzaq2TowuUq2gLqBPvemJetc4="},
            {name:"routeros",SRI:"sha256-m8kV6UHjwCCRjBMNy67sOQImtSQvR7z+IHnEF2Hd49E="},
            {name:"school-book",SRI:"sha256-WQlQZaXxFHgaxrEi8N7yuzVKxbH0Dr4T/I+4NkEx1e8="},
            {name:"shades-of-purple",SRI:"sha256-nBE2Mu8U6MyA2tij8w9c1eBbwBkVlY0rqZQrtdTKePA="},
            {name:"solarized-dark",SRI:"sha256-xUUCW7JMutlIaRYLbH+zoZ6m1uR+41g6mnmR1yaJQkk="},
            {name:"solarized-light",SRI:"sha256-WYJU0xxU/YMhVBfwHlz/hFemLIHoVsfIClbaksqOWvk="},
            {name:"sunburst",SRI:"sha256-Gzd23jxV5GcW9yoFsMduPm18uqn9RGwxHgcg6zs2H1U="},
            {name:"tomorrow-night-blue",SRI:"sha256-5Kr7SYiCX+8lWzO4pfBPyY98dxUXBObcdOw8tcuF/QY="},
            {name:"tomorrow-night-bright",SRI:"sha256-gwltEx6k+BAgIg/cx3dTe3AIWWsU3L/Cm3oBJcCWRrI="},
            {name:"tomorrow-night-eighties",SRI:"sha256-VeRq5fe7DQWoI4BTnuxQBub1iKtAtH4J69kUO3fD288="},
            {name:"tomorrow-night",SRI:"sha256-zEBt/NUc+uN4w9zQOBSaSK447BRKQdbHlRJpcp72uQk="},
            {name:"tomorrow",SRI:"sha256-+zZrwZRTANgZztUKVQSNKIlrDoWv8504HQWcupH9SRs="},
            {name:"vs",SRI:"sha256-iGs2TpBtdfGr1FIgzGyO4CKAD1+2QaDswtMmJwDtHAs="},
            {name:"vs2015",SRI:"sha256-9uLiFREx/Kkjh/rMpeUWdi+3+cr7Nr7GJukKXFp5qwU="},
            {name:"xcode",SRI:"sha256-fjO4CUN/XJTfsDmlIBojCwY4EV94jfOJpPzqd19TSko="},
            {name:"xt256",SRI:"sha256-v9n3UI0oQU+CdTO0T00/nheXzA7E3ADsuRUt6zyJRc4="},
            {name:"zenburn",SRI:"sha256-SSv+ItRKe+sw8qp09p/sHTceA9nkqlO4s3Ioz1z3tms="}
        ];
        var selectHtml = [];
        selectHtml.push('<select id="changeStyle">');
        for(var i in cssList) {
            var _css = cssList[i];
            if(_css.name == "solarized-dark")
                selectHtml.push('<option value="' + _css.SRI +'" selected>'+ _css.name +'</option>');
            else
                selectHtml.push('<option value="' + _css.SRI +'" >'+ _css.name +'</option>');
        }
        selectHtml.push('</select>');
        selectHtmlString = selectHtml.join("");
        document.getElementById('changeStyleSelect').innerHTML = selectHtmlString;
        var obj = document.getElementById('changeStyle');
        obj.addEventListener("change",function(event){
            var value = this.options[this.options.selectedIndex].value;
            var name = this.options[this.options.selectedIndex].innerHTML;
            var l = document.createElement('link');
            l.setAttribute('href','//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/'+ name + '.min.css');
            l.setAttribute('rel','stylesheet');
            l.setAttribute('integrity',value);
            l.setAttribute('crossorigin',"anonymous");
            document.head.appendChild(l);
        });
    </script>
    </body>
</html>